import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Row,
  Col,
  Button,
  Table,
  Descriptions,
  Modal,
  message,
} from 'antd';

import BookingCourierListElem from './components/BookingCourierList';

import '@ant-design/compatible/assets/index.css';

interface BookingCourierProps extends FormComponentProps {
  dispatch: Dispatch;
  dataInfo: any;
  location: { query: any };
}

interface BookingCourierState {
  pageIndex: number;
  pageSize: number;
  addVisible: boolean;
  delVisible: boolean;
  delId: number;
  rowId:number;
}

@connect(({ bookingCourierList: { dataInfo } }: any) => ({ dataInfo }))

class BookingCourierElem extends Component<BookingCourierProps, BookingCourierState> {
  columns = [
    { title: '快递员', dataIndex: 'courierName' },
    { title: '手机号', dataIndex: 'courierPhone' },
    { title: '添加时间', dataIndex: 'createTime' },
    { title: '操作人', dataIndex: 'createUserName' },
    {
      title: '操作',
      dataIndex: 'id',
      render: (val: number, row: any) => (
        <span className="operLink" onClick={() => this.handleChangeDelete(true, val)}>
          删除
        </span>
      ),
    },
  ];

  state: BookingCourierState = {
    pageIndex: 1,
    pageSize: 20,
    addVisible: false,
    delVisible: false,
    delId: 0,
    rowId: 0,
  };

  componentDidMount() {
    const { location: { query } } = this.props;
    if (query && query.id) {
      this.fetchAction('fetch', { cabinetId: query.id });
    } else message.error('当前配置信息不存在!');
  }

  handleChangeAdd = (addVisible: boolean) => this.setState({ addVisible });


  handleChangeDelete = (delVisible: boolean, id?: number) => {
    this.setState({ delVisible, delId: id || 0 });
  };

  handleDetermineDelete = () => {
    const { delId: id, pageIndex, pageSize } = this.state;
    const {
      location: { query: { id: cabinetId } },
    } = this.props;
    const params = {
      pageIndex,
      pageSize,
      cabinetId,
      id,
    };
    this.fetchAction('delete', params);
    this.handleChangeDelete(false);
  };

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const { location: { query } } = this.props;
    const params = { pageIndex, pageSize, cabinetId: query.id };
    this.setState({ pageIndex, pageSize }, () => this.fetchAction('fetch', params));
  };

  onClickRow = ({ id }: any) => ({
    onClick: () => {
      this.setState({ rowId: id });
    },
  })

  setRowClassName = ({ id }: any) => {
    const { rowId } = this.state;
    return id === rowId ? 'clickRowStyl' : '';
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch } = this.props;
    const type = `bookingCourierList/${typeName}`;
    dispatch({ type, payload });
  };

  render() {
    const {
      pageIndex, pageSize, delVisible, addVisible,
    } = this.state;

    const {
      dataInfo,
      location: { query },
    } = this.props;

    const dataSource = dataInfo ? dataInfo.list : [];
    const pagination: object = {
      total: dataInfo ? dataInfo.count : 0,
      current: pageIndex,
      pageSize,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showTotal: () => `共${dataInfo.count || 0}条数据`,
      onChange: this.onSelectChange,
      onShowSizeChange: this.onSelectChange,
    };

    const props = {
      AddVisible: addVisible,
      ChangeAdd: this.handleChangeAdd.bind(this),
      CabinetId: query.id,
    };

    return (
      <Fragment>
        <PageHeader />
        <Row
          gutter={{ md: 8, xl: 24, lg: 48 }}
          style={{
            marginLeft: 0,
            marginRight: 0,
            marginTop: 12,
          }}
        >
          <Col md={8} sm={24}>
            <Card title="基本信息" bordered={false}>
              <Descriptions column={1}>
                <Descriptions.Item label="柜体名称">{query.name}</Descriptions.Item>
                <Descriptions.Item label="柜体编号">{query.code}</Descriptions.Item>
                <Descriptions.Item label="柜体状态">{query.statusName}</Descriptions.Item>
              </Descriptions>
            </Card>
          </Col>
          <Col md={16} sm={24}>
            <Card bordered={false}>
              <Button
                type="primary"
                size="small"
                className="addButton marginB12"
                onClick={() => this.handleChangeAdd(true)}
              >
                添加可预约快递员
              </Button>
              <Table
                rowKey="id"
                className="statementTable"
                columns={this.columns}
                dataSource={dataSource}
                pagination={pagination}
                onRow={this.onClickRow}
                rowClassName={this.setRowClassName}
              />
            </Card>
          </Col>
        </Row>
        <Modal
          title="确认提示"
          visible={delVisible}
          okText="删除"
          onOk={this.handleDetermineDelete}
          onCancel={() => this.handleChangeDelete(false)}
        >
          <p>确定删除当前预约快递员？</p>
        </Modal>
        <BookingCourierListElem {...props} />
      </Fragment>
    );
  }
}

export default Form.create<BookingCourierProps>()(BookingCourierElem);
